/**
 * Created by aaron on 2018/7/31.
 */
export default function (OpenSeadragon, paper) {
  if (!OpenSeadragon) {
    console.error('[openseadragon-canvas-overlay] requires OpenSeadragon')
    return
  }

  // ----------
  OpenSeadragon.Viewer.prototype.paperjsOverlay = function () {
    if (this._paperjsOverlayInfo) {
      return this._paperjsOverlayInfo
    }

    this._paperjsOverlayInfo = new Overlay(this)
    return this._paperjsOverlayInfo
  }

  // ----------
  var Overlay = function (viewer) {
    var self = this
    this.number = 0;
    this.name = 'openseadragon-paperjs-overlay';
    this.colors = [
      '#b31a1a',
      '#96c896',
      '#a05aa0',
      '#323232',
      '#ffc800',
      '#0000b4',
      '#b4b4b4',
    ]

    if (viewer.overlays) {
      viewer.overlays.push(this);
    }

    this._viewer = viewer

    this._containerWidth = 0
    this._containerHeight = 0

    this._canvasdiv = document.createElement('div')
    this._canvasdiv.style.position = 'absolute'
    this._canvasdiv.style.left = 0
    this._canvasdiv.style.top = 0
    this._canvasdiv.style.width = '100%'
    this._canvasdiv.style.height = '100%'
    this._viewer.canvas.appendChild(this._canvasdiv)

    this._canvas = document.createElement('canvas')
    this._canvas.setAttribute('id', 'osd-overlaycanvas')
    this._canvasdiv.appendChild(this._canvas)
    this.resize()

    paper.setup(this._canvas)

    this._viewer.addHandler('update-viewport', function () {
      self.resize()
      self.resizecanvas()
    })

    this._viewer.addHandler('open', function () {
      self.resize()
      self.resizecanvas()
    })

    this._viewer.addHandler('rotate', function ({
      eventSource,
      degrees,
      userData
    }) {
      self.setRotation(degrees);
    })

    this.resize()
  }

  // ----------
  Overlay.prototype = {
    // ----------
    paperCanvas: function () {
      return this._canvas
    },
    clear: function () {
      // TODO: check what needs to be added here
    },
    // ----------
    resize: function () {
      if (this._containerWidth !== this._viewer.container.clientWidth) {
        this._containerWidth = this._viewer.container.clientWidth
        this._canvasdiv.setAttribute('width', this._containerWidth)
        this._canvas.setAttribute('width', this._containerWidth)
      }
      if (this._containerHeight !== this._viewer.container.clientHeight) {
        this._containerHeight = this._viewer.container.clientHeight
        this._canvasdiv.setAttribute('height', this._containerHeight)
        this._canvas.setAttribute('height', this._containerHeight)
      }
    },
    resizecanvas: function () {
      this._canvasdiv.setAttribute('width', this._containerWidth)
      this._canvas.setAttribute('width', this._containerWidth)
      this._canvasdiv.setAttribute('height', this._containerHeight)
      this._canvas.setAttribute('height', this._containerHeight)
      paper.view.viewSize = new paper.Size(this._containerWidth, this._containerHeight)
      var viewportZoom = this._viewer.viewport.getZoom(true)
      var image1 = this._viewer.world.getItemAt(0)
      paper.view.zoom = image1.viewportToImageZoom(viewportZoom)
      var center = this._viewer.viewport.viewportToImageCoordinates(this._viewer.viewport.getCenter(true))
      paper.view.center = new paper.Point(center.x, center.y)
    },
    setRotation: function (angle) {
      // 当前 rotation
      var rotation = paper.view.rotation;

      //paper.view.rotate(angle - rotation);
    }
  }
}